<template>
  <div>
    <div class="progress-bar">
      <div class="bar-inner" ref="progressBar"
      @touchstart.prevent="handleTouchstart"
      @touchmove.prevent="handleTouchmove"
      @touchend.prevent="handleTouchend"
      @click.prevent="progressBarClick"
      >
        <div class="progress" ref="progress"></div>
        <div class="progress-btn-wrapper" ref="progressDot">
          <div class="progress-dot"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {mapMutations} from 'vuex'
export default {
  name: 'ProgressBar',
  props: {
    percent: {
      type: Number,
      default: 0
    }
  },
  created () {
    this.touch = {}
  },
  methods: {
    ...mapMutations({setPlayingState: 'SET_PLAYING_STATE'}),
    progressBarClick (e) {
      let rect = this.$refs.progressBar.getBoundingClientRect()
      const progressWidth = e.pageX - rect.left
      this.setProgress(progressWidth)
      // console.log(progressWidth)
      this._triggerPercent()
    },
    handleTouchstart (e) {
      this.touch.initiated = true
      this.touch.startX = e.targetTouches[0].pageX
      this.touch.proWidth = this.$refs.progress.clientWidth
    },
    handleTouchmove (e) {
      if (!this.touch.initiated) return
      let deltaX = e.targetTouches[0].pageX - this.touch.startX
      let progressWidth = Math.min(this.$refs.progressBar.clientWidth, Math.max(0, this.touch.proWidth + deltaX))
      this.setProgress(progressWidth)
    },
    handleTouchend () {
      this.touch.initiated = false
      this._triggerPercent()
      this.setPlayingState(true)
    },
    setProgress (progressWidth) {
      this.$refs.progress.style.width = `${progressWidth}px`
      this.$refs.progressDot.style.transform = `translate3d(${progressWidth}px, 0, 0)`
    },
    _triggerPercent () {
      const barWidth = this.$refs.progressBar.clientWidth
      const percent = this.$refs.progress.clientWidth / barWidth
      this.$emit('changePercent', percent)
    }
  },
  watch: {
    percent (newVal) {
      if (newVal >= 0 && !this.touch.initiated) {
        let barWidth = this.$refs.progressBar.clientWidth
        let progressWidth = barWidth * this.percent
        this.setProgress(progressWidth)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import 'common/scss/variable.scss';
@import 'common/scss/mixin.scss';
.progress-bar{
            height: 0.6rem;
            position: relative;
            .bar-inner{
              height: 0.08rem;
              position: relative;
              top: 0.26rem;
              background: $color-background-d;
              .progress{
                  position: absolute;
                  height: 100%;
                  background: $color-theme;
                  width: 0;
              }
              .progress-btn-wrapper{
                width: 0.6rem;
                height: 0.6rem;
                position: absolute;
                left: 0;
                top: -0.26rem;
                .progress-dot{
                  width: 0.32rem;
                  height: 0.32rem;
                  box-sizing: border-box;
                  border-radius: 50%;
                  border: 6px solid #fff;
                  background: $color-theme;
                  position: relative;
                  top: 0.14rem;
                  left: -0.14rem;
                }
              }
            }
          }
</style>
